import React from "react";
import { useShallow } from "zustand/react/shallow";
import EarthRotate from "@/assets/images/earth-rotate.gif";
import EchartsInstance from "@/components/EchartsInstance";
import { useGlobalStore } from "@/stores";
import { dataCategoryDistributionOptions } from "./options";

interface Props {
  data: Record<string, any>;
}

const DataCategoryDistribution: React.FC<Props> = (props) => {
  const { renderer } = useGlobalStore(useShallow((state) => ({ renderer: state.renderer })));

  const config = dataCategoryDistributionOptions(props.data);

  return (
    <div className="flex items-center">
      <EchartsInstance className="w-[430px] h-[200px]" renderer={renderer} options={config} />
      <img src={EarthRotate} alt="earth" draggable={false} className="w-[220px] h-[auto] rounded-[50%]" />
    </div>
  );
};

export default React.memo(DataCategoryDistribution);
